<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>层次选择器</title>
</head>
<style>
  /* 后代选择器：先选中第一个选择器对应的元素，然后再选中该元素下面所有的第二个选择器选中的元素 */
  .outer li {
    background-color: red;
  }
  /* 子代选择器：先选中第一个选择器对应的元素，然后再选中该元素下面第一代选择器选中的元素 */
  .outer > li {
    color: lightblue;
  }

  /* 相邻兄弟选择器：先选中第一个选择器对应的元素，再选中该元素后面的第一个元素 */
  .inner + li {
    color: yellow;
  } 

  /* 通用兄弟选择器：先选中第一个选择器对应的元素，再选中该元素后面的所有元素 */
  .inner ~ li {
    font-size: 40px;
  } 
</style>
<body>
  <ul class="outer">
    <li>卫衣</li>
    <ul>
      <li>格子衫</li>
      <li>牛仔裤</li>
    </ul>
    <li class="inner">帽子</li>
    <li>连衣裙</li>
    <li>衬衫</li>
  </ul>
</body>
</html>